<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>一年四季</title>
		<style>
			
			#div1{
				border: 1px solid red;
				width: 450px;
				/*background-color: red;*/
			}
			ul li:nth-of-type(1){
				float: left;
			}
			ul li:nth-of-type(2){
				float: left;
			}
			.l1{
				clear: both;
			}
			ul li:nth-of-type(3){
				float: left;
			}
			ul li:nth-of-type(4){
				float: left;
			}
			li img {
				vertical-align:  middle;
				padding: 10px;
			} 
			 li a:nth-of-type(2){
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div class="cle">
				<ul type="none">
					<li>
						<img src="../img/1.jpg"/ style="display: block;">
						<a href="javascript:location.href='chun.html'" >春</a>
					</li>
					<li>
						<img src="../img/2.jpg" / style="display: block;">
						<a href="javascript:location.href='xia.html'">夏</a>
					</li>
					<li class="l1"></li>
					<li>
						<img src="../img/3.jpg" / style="display: block;">
						<a href="javascript:location.href='qiu.html'">秋</a>
					</li>
					<li>
						<img src="../img/4.jpg" / style="display: block;">
						<a href="javascript:location.href='dong.html'">冬</a>
					</li>
				</ul>
				<p style="text-align: center;"><a href="javascript:location.reload()">刷新本頁</a></p>
			</div>
		</div>
	</body>
</html>
